MUI

2023-11-03 06:48| 来源: 网络整理| 查看: 265

MUI-打开页面、及页面间传参方法汇总

有三件事人类都要经历：出生生活和死亡。他们出生时无知无觉，死到临头，痛不欲生，活着的时候却又怠慢了人生。 —— 拉布吕耶尔

Method 1 --预加载 init方法 mui.init({ preloadPages:[ { url:prelaod-page-url, id:preload-page-id, styles:{},//窗口参数 extras:{},//自定义扩展参数 subpages:[{},{}]//预加载页面的子页面 } ], preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制 });

注：

可加载多个webview；该方法不会返回页面的引用，mui.init是异步执行，执行完后，直接用 “plus.webview.getWebviewByid” 可能返回null；不建议当页预加载，当页获取； mui.preload方法 var page = mui.preload({ url:new-page-url, id:new-page-id,//默认使用当前页面的url作为id styles:{},//窗口参数 extras:{}//自定义扩展参数 });

注：加载单个webview，加载多个，需要多次调用；

加载完毕后，进行展示。

var _page = plus.webview.getWebviewByid('preload-page-id'); _page.show('pop-in'); Method 2 --打开新页面 mui.openWindow({ url:new-page-url, id:new-page-id, styles:{ top:newpage-top-position,//新页面顶部位置 bottom:newage-bottom-position,//新页面底部位置 width:newpage-width,//新页面宽度，默认为100% height:newpage-height,//新页面高度，默认为100% ...... }, extras:{ .....//自定义扩展参数，可以用来处理页面间传值 }, createNew:false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示 show:{ autoShow:true,//页面loaded事件发生后自动显示，默认为true aniShow:animationType,//页面显示动画，默认为”slide-in-right“； duration:animationTime//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒； }, waiting:{ autoShow:true,//自动显示等待框，默认为true title:'正在加载...',//等待对话框上显示的提示内容 options:{ width:waiting-dialog-widht,//等待框背景区域宽度，默认根据内容自动计算合适宽度 height:waiting-dialog-height,//等待框背景区域高度，默认根据内容自动计算合适高度 ...... } } }) Method 3 --创建页面（原生方法、建议使用）

一、权限设置

{ "permissions":{ // ... "Webview": { "description": "窗口管理" } } }

二、创建页面

var w = plus.webview.create( url, id, styles, extras );//参数：地址，页面id，页面样式，传参 w.show(); // 显示窗口 Method 4 --页面间传参

一、mui.fire方法（建议使用）

//触发详情页面的newsId事件 mui.fire(detailPage,'newsId',{ id:id }); //detailPage页，添加newId自定义事件监听 window.addEventListener('newsId',function(event){ //获得事件参数 var id = event.detail.id; });

二、mui.openWindow方法

详情，见 method 2;

三、mui.preload方法

详情，见 method 1 mui.preload();

文章参照： http://dev.dcloud.net.cn/mui/window/

【本文地址】

公司简介

联系我们